<template>
  <div>
    <el-collapse-transition>

      <section class="unit" ref='unit' v-if='visible.close'>
    
        <h2 class='title'>
    
          <span>各单位年龄结构及人员分布</span>
    
          <span>

            <i class="fa fa-minus" v-if='visible.min' @click.stop='visible.min = false'></i>

            <i class="fa fa-plus" v-else @click.stop='visible.min = true'></i>

            <i class="fa fa-times" @click.stop='visible.close = false'></i>

          </span>
    
        </h2>

        <el-collapse-transition>

          <div id='echarts1' v-show='visible.min' style='height:1020%;width:100%'></div>

        </el-collapse-transition> 
    
      </section>
     </el-collapse-transition> 

    <el-dialog :visible.sync="dialogTableVisible" top='8vh' size=''>
  
      <el-table :data="tableData" style="width:800px" stripe>
  
        <el-table-column property="emplid" label="员工编号"></el-table-column>
  
        <el-table-column property="name" label="姓名"></el-table-column>
  
        <el-table-column property="dept_descr" width="300" label="所在部门"></el-table-column>
  
        <el-table-column label="操作">
  
          <template slot-scope="scope">
  
            <el-button 
  
              size="mini"

              type="primary" @click="ComputedEmplid(scope)">干部任免审批表</el-button>
          </template>

          </el-table-column>
        </el-table> 

    
          <el-pagination
              @current-change='currentChange'	
              :page-size="10"
              layout="total, prev, pager, next"
              :total="total"
              style='margin-top:20px;padding:0px;margin-left:-6px'
              >
            </el-pagination>
           <!-- <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogTableVisible = false">关闭</el-button>
          </span> -->
        </el-dialog>
    </div>
</template>

<script>
import echarts from 'echarts'

import Vue from 'vue'

import URL from '../../common/js/dataLookUrl'

import CollapseTransition from 'element-ui/lib/transitions/collapse-transition'
import { _encode } from '@/common/js/handleCode'


import {

  Table,

  TableColumn,

  Dialog,

  Button,

  Pagination

} from 'element-ui'

Vue.use(Table)

Vue.use(TableColumn)

Vue.use(Dialog)

Vue.use(Button)

Vue.use(Pagination)


Vue.component(CollapseTransition.name, CollapseTransition)

export default {

  data () {

    return {

      visible: {
        min: true,
        close: true
      },

      tableData: [],

      total: 0,

      dialogTableVisible: false,

      ageName: '',

      leaderUnit: ''

    }

  },

  props: ['res'],

  mounted () {

    if (this.$refs.unit) {

      let self = this

      let unitData = {

        yAxisData () {

          let arr = []

          self.res.unit.forEach((ele, i) => {


            if (ele.c_leader_unit) {
              arr.push(ele.c_leader_unit)

            } else {
              arr.push('')
            }

          })

          return arr

        },

        fiftyabovecount () {

          let arr = []

          self.res.unit.forEach((ele, i) => {

            if (ele.unit_fiftyabovecount) {

              arr.push(ele.unit_fiftyabovecount)
            } else {
              arr.push('')
            }

          })

          return arr

        },

        fortytofiftysvcount () {

          let arr = []

          self.res.unit.forEach((ele, i) => {

            if (ele.unit_fortytofiftysvcount) {

              arr.push(ele.unit_fortytofiftysvcount)
            } else {
              arr.push('')
            }

          })

          return arr

        },

        fortytofiftysycount () {

          let arr = []

          self.res.unit.forEach((ele, i) => {

            if (ele.unit_fortytofiftysycount) {

              arr.push(ele.unit_fortytofiftysycount)
            } else {
              arr.push('')
            }

          })

          return arr

        },

        thirtytofortsycount () {

          let arr = []

          self.res.unit.forEach((ele, i) => {

            if (ele.unit_thirtytofortsycount) {

              arr.push(ele.unit_thirtytofortsycount)
            } else {
              arr.push('')
            }


          })

          return arr

        },

        thirtybelowcount () {

          let arr = []

          self.res.unit.forEach((ele, i) => {

            if (ele.unit_thirtybelowcount) {
              arr.push(ele.unit_thirtybelowcount)
            } else {
              arr.push('')
            }


          })

          return arr

        }

      }



      this.$nextTick(function () {

        this.drawPie('#echarts1', unitData)

      })

    }

  },

  methods: {

    ComputedEmplid (data) {
      const sex = data.row.sex_descr == '女' ? 2 : 1
      const params = {
        emplid: data.row.emplid,
        sex
      }
      window.open('/module/leaderAppoint.html?' + _encode(JSON.stringify(params)))

    },

    drawPie (id, unitData) {

      this.charts = echarts.init(this.$refs.unit.querySelector(id))

      this.charts.setOption({

        tooltip: {

          trigger: 'axis',

          axisPointer: {

            // 坐标轴指示器，坐标轴触发有效

            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'

          }

        },

        legend: {

          top: '15px',

          data: ['30岁以下', '30-40岁', '40-45岁', '45-50岁', '50岁以上']

        },

        grid: {

          left: '3%',

          right: '4%',

          bottom: '3%',

          containLabel: true

        },

        xAxis: {

          type: 'value'

        },

        yAxis: {

          type: 'category',

          data: unitData.yAxisData()

        },

        series: [{

          name: '30岁以下',

          type: 'bar',

          stack: '总量',

          label: {

            normal: {

              show: true,

              position: 'insideRight'

            }

          },

          data: unitData.thirtybelowcount()

        },

        {

          name: '30-40岁',

          type: 'bar',

          stack: '总量',

          label: {

            normal: {

              show: true,

              position: 'insideRight'

            }

          },

          data: unitData.thirtytofortsycount()

        },

        {

          name: '40-45岁',

          type: 'bar',

          stack: '总量',

          label: {

            normal: {

              show: true,

              position: 'insideRight'

            }

          },

          data: unitData.fortytofiftysvcount()

        },

        {

          name: '45-50岁',

          type: 'bar',

          stack: '总量',

          label: {

            normal: {

              show: true,

              position: 'insideRight'

            }

          },

          data: unitData.fortytofiftysycount()

        },

        {

          name: '50岁以上',

          type: 'bar',

          stack: '总量',

          label: {

            normal: {

              show: true,

              position: 'insideRight'

            }

          },

          data: unitData.fiftyabovecount()

        }

        ]

      })



      this.charts.on('click', echartsData => {

        let age = echartsData.seriesName

        this.leaderUnit = echartsData.name



        switch (age) {

          case '30岁以下':

            this.ageName = 'thirtybelow'

            break

          case '30-40岁':

            this.ageName = 'thirtytoforty'

            break



          case '40-45岁':

            this.ageName = 'fortysvfifty'

            break

          case '45-50岁':

            this.ageName = 'fortysyfifty'

            break

          case '50岁以上':

            this.ageName = 'fiftyabove'

            break

        }



        let params = {

          leaderType: 'B',

          leaderUnit: this.leaderUnit,

          ageRange: this.ageName,

          pageNum: 1,

          pageSize: 10

        }



        this.dialogTableVisible = true



        this.Axios.Post(URL.getempleMaintainBylist.url, params).then(res => {

          this.tableData = res.data.datas

          this.total = res.data.total

        })

      })

    },

    currentChange (index) {

      let params = {

        leaderType: 'B',

        leaderUnit: this.leaderUnit,

        ageRange: this.ageName,

        pageNum: index,

        pageSize: 10

      }



      this.Axios.Post(URL.getempleMaintainBylist.url, params).then(res => {

        this.tableData = res.data.datas

        this.total = res.data.total

      })

    }

  }

}
</script>

<style scoped>
.unit {
  margin-top: 30px;

  background-color: #fff;

  border-top: 3px solid #00c0ef;
}

.unit .title {
  border-bottom: 1px solid #f1f1f1;

  line-height: 40px;

  padding: 0 10px;

  font-size: 18px;

  overflow: hidden;
}

.unit .title span:first-of-type {
  font-size: 18px;

  font-family: 'Microsoft YaHei', museo-slab, 'Helvetica Neue', Helvetica, Arial,
    sans-serif;

  color: rgb(68, 68, 68);

  font-weight: normal;

  float: left;
}

.unit .title i {
  cursor: pointer;
}

.unit .title span:last-of-type {
  font-size: 14px;

  font-family: 'Microsoft YaHei', museo-slab, 'Helvetica Neue', Helvetica, Arial,
    sans-serif;

  color: rgb(151, 160, 179);

  font-weight: normal;

  float: right;
}

.unit .title span:last-of-type i {
  margin-left: 10px;
}
</style>